<template>
	<view>
		<view class="u-page">

			<view class="search" @click="search()">
				<u-search shape="round" disabled></u-search>
			</view>
			<view class="wrap">
				<u-swiper :list="swiperList" :effect3d="true" @click="swiperDetails"></u-swiper>
			</view>
			<view class="nav">
				<indexNav></indexNav>
			</view>
			<view class="zb" @click="liveBroadcast">
				<image class="img" src="../../static/img/1111111111sss.jpg"></image>
			</view>
			<!-- 限时抢购，好货精选 -->
			<view class="flash-good" v-if="flashPromotionData!=null&&flashPromotionData!=''" @click="seckill()">
				<view class="flash-sale" >
					<view class="flash-title">
						<view class="pictrue">
							<image src="../../static/img/xsqg_title.png" mode=""></image>
						</view>
						<view class="date-time" v-if="flashPromotionData.smsFlashPromotionSessionVOS[0].smsFlashPromotionProductRelationVOS.length!=0&&flashPromotionData.smsFlashPromotionSessionVOS!=null&&flashPromotionData.smsFlashPromotionSessionVOS!=''">
							<tui-countdown :time="timestamp" @end="end" color="#fff" borderColor="#FF0000" backgroundColor="#FF0000"
							 colonColor="#fff" :size="26" :height="40" :width="40"></tui-countdown>
						</view>
					</view>
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
				<view class="good-choice" v-if="flashPromotionData.smsFlashPromotionSessionVOS[0].smsFlashPromotionProductRelationVOS.length!=0&&flashPromotionData.smsFlashPromotionSessionVOS!=null&&flashPromotionData.smsFlashPromotionSessionVOS!=''">
					<view class="goods-list">
						<view class="list" v-for="(item,k) in flashPromotionData.smsFlashPromotionSessionVOS[0].smsFlashPromotionProductRelationVOS"
						 :key="k">
							<view class="pictrue">
								<image :src="item.pmsProduct.pic"></image>
							</view>
							<view class="price">
								<text class="selling-price">￥{{item.flashPromotionPrice}}</text>
								<text class="original-price">￥{{item.pmsProduct.price}}</text>
							</view>
						</view>

					</view>
				</view>
				<view class="good-choice" v-else>
					<image style="width: 100%;" src="../../static/img/45454545345345343.jpg" mode="widthFix" />
				</view>
			</view>
			<view class="list" v-if="list_show">
				<u-divider style="20rpx">精品推荐</u-divider>
				<u-waterfall v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="details(item)">
							<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
							<!-- #ifndef MP-WEIXIN -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="demo-img-wrap">
								<image class="demo-image" :src="item.image" mode="widthFix"></image>
							</view>
							<!-- #endif -->
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-price">
								{{item.price}}元
							</view>
							<view class="demo-shop">
								{{item.shop}}
							</view>
							<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
							<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="details(item)">
							<!-- #ifndef MP-WEIXIN -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="demo-img-wrap">
								<image class="demo-image" :src="item.image" mode="widthFix"></image>
							</view>
							<!-- #endif -->
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-price">
								{{item.price}}元
							</view>
							<view class="demo-shop">
								{{item.shop}}
							</view>
							<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
							<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
						</view>
					</template>
				</u-waterfall>
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData" :load-text="loadText"></u-loadmore>

			</view>
		</view>

		<tabbar />

		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>

		<failTimeout v-show="failTimeout" :tabbar="true"></failTimeout>
		<!-- 
		<u-mask :show="mask_show" @click="show = false">
			<view class="warp">
				<u-loading class="rect" mode="circle" :show="mask_show" size="50" color="red"></u-loading>
			</view>

		</u-mask> -->
	</view>

</template>

<script>
	import HomeController from '../../api/HomeController.js'
	import PortalBrandController from '../../api/PortalBrandController.js'
	import indexNav from './nav.vue'
	import tabbar from '../../components/tabbar.vue'
	import UmsMemberCouponController from '../../api/UmsMemberCouponController.js'
	import Cookies from '../../utils/Cookies.js'
	export default {

		data() {
			return {
				failTimeout: false,
				swiperList: [],
				loadStatus: 'loadmore',
				list: [
					// {
					// 	price: 35,
					// 	title: '北国风光，千里冰封，万里雪飘',
					// 	shop: '李白杜甫白居易旗舰店',
					// 	image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					// }
				],
				index: 0,
				load: true,
				list_show: true,
				mask_show: true,
				verificationDataT: true,
				timestamp: 10,
				flashPromotionData: null,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有了,萨特信研技术支持'
				}
			}
		},
		async onLoad() {

			this.list_show = false;
			setTimeout(() => {
				this.list_show = true;
			}, 100)


			this.index = 0;
			this.load = true;
			this.list = []
			UmsMemberCouponController.lists(0, 1).then(res => {
				if (res.data.code == 401) {
					Cookies.delUserToken()
				}
			
			})
			this.addRandomData();
			this.verificationDataT = false;

			


		},
		onShow() {

			this.flashPromotions();
			this.failTimeout = false
			let swiperArr = [];
			HomeController.content().then(res => {
				if (res.data.code == 200) {
					res.data.data.advertiseList.forEach(e => {
						if (e.type == 1) {
							swiperArr.push({
								image: e.pic,
								id: e.url
							})
						}

					})
					this.swiperList = swiperArr;
				}
			}).catch(err => {
				if (err.errMsg == 'request:fail timeout') {
					this.failTimeout = true
				}
			})


			// if(this.verificationDataT){
			// 	this.verificationData(this.index)
			// 	this.verificationDataT=true
			// }else{
			// 	this.verificationDataT=true
			// }


		},
		onReachBottom() {

			this.addRandomData();

		},
		methods: {
			async flashPromotions() {
				await HomeController.flashPromotion().then(res => {
					if (res.data.data != null) {
						if (res.data.data.smsFlashPromotionSessionVOS != '' && res.data.data.smsFlashPromotionSessionVOS != null && res.data.data.smsFlashPromotionSessionVOS != 'undefined') {
							res.data.data.smsFlashPromotionSessionVOS.forEach(e => {
								e.smsFlashPromotionProductRelationVOS = e.smsFlashPromotionProductRelationVOS.slice(0, 3)
							})
							this.timestamp = this.getTimes(res.data.data.smsFlashPromotionSessionVOS[0].endTime)
						}
						this.flashPromotionData = res.data.data
					}

				})
			},
			async end() {
				await this.flashPromotions();
			},
			getTimes(endTime) {
				let date = new Date();
				let time = new Date("1970/01/01 " + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()).getTime();
				return (new Date(endTime).getTime() + 1 * 60 * 60 * 1000 - time) / 1000
			},
			seckill() {
				uni.navigateTo({
					url: '/pages/seckill/seckill'
				})
			},
			liveBroadcast() {
				uni.navigateTo({
					url: "/pages/liveBroadcast/liveBroadcast"
				})
			},
			getPhoneNumber: function(e) {
				console.log(e)
			},
			async addRandomData() {
				if (this.load) {
					this.index++;
					await HomeController.recommendProductList(this.index, 10).then(res => {
						if (res.data.code == 200) {
							res.data.data.forEach(e => {
								this.list.push({
									price: e.price,
									title: e.subTitle,
									shop: e.brandName,
									image: e.pic,
									id: e.id,
								})
							})
							if (res.data.data.length == 0 || res.data.data.length != 10) {
								this.load = false
								this.loadStatus = 'nomore'


							} else {
								this.loadStatus = 'loadmore';
							}

						}
					}).catch(err => {
						if (err.errMsg == 'request:fail timeout') {
							this.failTimeout = true
						}
					})
				}

			},
			async verificationData(index) {
				let verificationList = [];
				for (let i = index; i > 0; i--) {
					await HomeController.recommendProductList(i, 2).then(res => {
						if (res.data.code == 200) {
							res.data.data.forEach(e => {
								verificationList.push({
									price: e.price,
									title: e.subTitle,
									shop: e.brandName,
									image: e.pic,
									id: e.id,
								})
							})
						}
					}).catch(err => {
						if (err.errMsg == 'request:fail timeout') {
							this.failTimeout = true
						}
					})
				}

				let arrIndex = [];
				let listLength = this.$refs.uWaterfall.leftList.length + this.$refs.uWaterfall.rightList.length
				if (listLength > verificationList.length) {

					let temp01 = [];
					let temp02 = [];
					for (var i in verificationList) {
						temp01[verificationList[i].id] = true;
					}
					for (var k in this.list) {
						if (!temp01[this.list[k].id]) {
							temp02.push(this.list[k].id)
						}
					}

					temp02.sort()
					temp02.reverse()
					for (var i = temp02.length - 1; i >= 0; i--) {
						this.$refs.uWaterfall.remove(temp02[i])
					}

				} else if (listLength < verificationList.length) {
					let listA = this.$refs.uWaterfall.leftList.concat(this.$refs.uWaterfall.rightList)
					console.log(listA)
					let temp01 = [];
					let temp02 = [];
					for (var i in listA) {
						temp01[listA[i].id] = true;
					}
					for (var k in verificationList) {
						if (!temp01[verificationList[k].id]) {
							temp02.push(verificationList[k])
						}
					}
					temp02.map(e => {
						this.list.push(e)
					})
					// this.list=verificationList
					console.log(temp02)
				}


			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			details(item) {
				uni.navigateTo({
					url: "/pages/goodsDetails/goodsDetails?id=" + item.id,
				});
			},
			swiperDetails(index) {
				uni.navigateTo({
					url: "/pages/goodsDetails/goodsDetails?id=" + this.swiperList[index].id,
				});
			},
			search() {
				uni.navigateTo({
					url: "/pages/search/search",
				});
			}
		},
		components: {
			indexNav,
			tabbar,
		},
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}

	.list .u-divider {
		background-color: rgb(240, 240, 240) !important;
	}
</style>
<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 100rpx;
		height: 100rpx;

		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style lang="scss" scoped>
	.nav {
		padding: 0 20rpx;
	}

	.wrap {
		padding: 20rpx;
	}

	.zb {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.zb .img {
		width: 100%;
		height: 300rpx;
	}

	.search {
		padding: 5px 10px;
		background: #ffffff;
	}

	.list {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 26rpx;
		margin-top: 5px;
		color: $u-main-color;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
<style lang="scss">
	/* 限时抢购，好货精选 */
	.flash-good {

		padding: 0 25rpx;
		height: 100%;
		background-color: #FFFFFF;

		.flash-sale {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;

			.goods-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				height: 80rpx;

				.title {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						color: #4c4b4b;
					}
				}

				.describe {
					display: flex;
					align-items: center;
					margin-left: 10rpx;

					text {
						font-size: 24rpx;
						color: #979696;
					}

					.num {
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 6rpx;
						width: 30rpx;
						height: 30rpx;
						background-color: #FF0000;
						color: #FFFFFF;
						border-radius: 6rpx;
					}
				}
			}

			.flash-title {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				width: 50%;
				height: 80rpx;

				.pictrue {
					display: flex;
					align-items: center;
					height: 100%;

					image {
						width: 118rpx;
						height: 28rpx;
					}
				}

				.date-time {
					display: flex;
					align-items: center;
					margin-left: 50rpx;

					.time {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40rpx;
						height: 40rpx;
						background-color: #FF0000;
						font-size: 24rpx;
						color: #FFFFFF;
						border-radius: 6rpx;
					}

					.da {
						font-size: 34rpx;
						color: #212121;
						margin: 0 6rpx;
					}
				}
			}

			.goods-list {
				display: flex;
				width: 50%;
				height: 220rpx;

				.list {
					width: 50%;
					height: 100%;

					.pictrue {
						width: 100%;
						height: 70%;

						image {
							width: 150rpx;
							height: 150rpx;
						}
					}

					.price {
						display: flex;
						align-items: center;
						width: 100%;
						height: 30%;

						.selling-price {
							font-size: 28rpx;
							font-weight: bold;
							color: #FF0000;
						}

						.original-price {
							font-size: 24rpx;
							text-decoration: line-through;
							color: #bbbaba;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.good-choice {
			width: 100%;
			// height: 100%;
			padding-bottom: 20rpx;
			box-sizing: border-box;

			.goods-list {
				display: flex;
				width: 100%;
				height: 220rpx;

				.list {
					width: 25%;
					height: 100%;

					.pictrue {
						width: 100%;
						height: 70%;

						image {
							width: 150rpx;
							height: 150rpx;
						}
					}

					.price {
						display: flex;
						align-items: center;
						width: 100%;
						height: 30%;

						.selling-price {
							font-size: 28rpx;
							font-weight: bold;
							color: #FF0000;
						}

						.original-price {
							font-size: 24rpx;
							text-decoration: line-through;
							color: #bbbaba;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
